<template>
    <div class="CommentDetails">
        <!--        头部栏-->
        <div class="CommentDetails-p">
            <el-row :gutter="20">
                <el-col :span="6" >
                    <div class="grid-content bg-purple">
                        <p style="float:left; margin-top: 8px">课程评价详情</p>
                    </div>
                </el-col>
                <el-col :span="6" :offset="12">
                    <div class="grid-content bg-purple">
                        <el-button icon="el-icon-arrow-left" @click="returnPage" circle></el-button>
                        <el-button icon="el-icon-refresh-left" circle></el-button>
                        <el-button icon="el-icon-switch-button" @click="returnPage" circle></el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-container>
<!--           信息栏-->
            <el-aside width="200px">
                <div>
                    <el-aside width="200px" >
                        <template>
                            <el-row class="demo-avatar demo-basic">
                                <el-col  :span="12" >
                                    <div class="demo-basic--circle">
                                        <!--                                头像部分-->
                                        <div class="block" style="padding-left: 54px;width: 80px">
                                            <el-avatar :size="80" :src="circleUrl"></el-avatar>
                                            <span type="primary">xxx</span>
                                        </div>
                                    </div>

                                </el-col>
                                <!--                                信息部分-->
                                <el-descriptions column="1" >
                                    <el-descriptions-item label="课程">xxx</el-descriptions-item>
                                    <el-descriptions-item label="购买人">xxx</el-descriptions-item>
                                    <el-descriptions-item label="日期">xxx</el-descriptions-item>
                                    <el-descriptions-item label="IP地址">xxx</el-descriptions-item>
                                    <el-descriptions-item label="账号">xxx</el-descriptions-item>
                                </el-descriptions>
                            </el-row>
                        </template>
                    </el-aside>
                </div>

            </el-aside>
<!--           内容栏-->
            <el-main>
<!--                收藏量何阅读量-->
                <div style="">
                    <div>
                        <el-row>
                            <el-col :span="4">
                                <div class="grid-content bg-purple">
                                    <i class="el-icon-star-on">1000</i>
                                    &nbsp;&nbsp;
                                    <i class="el-icon-view">1000</i>
                                </div>
                            </el-col>
                            <el-divider></el-divider>
                        </el-row>
                    </div>
                    <div>
<!--                        课程介绍-->
                        <el-row class="el-row-wen">
                            <el-col :span="4">
                            <span>
                                xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                            </span>
                            </el-col>
                        </el-row>
<!--                        图片-->
                        <el-row>
                            <el-image :src="src"></el-image>&nbsp;
                            <el-image :src="src"></el-image>&nbsp;
                            <el-image :src="src"></el-image>&nbsp;
                            <el-image :src="src"></el-image>&nbsp;
                            <el-image :src="src"></el-image>&nbsp;
                            <el-image :src="src"></el-image>&nbsp;
                            <el-image :src="src"></el-image>&nbsp;
                            <el-image :src="src"></el-image>&nbsp;
                            <el-image :src="src"></el-image>&nbsp;
                        </el-row>
                    </div>
<!--                    全部评论-->
                    <div>
                        <el-row>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">
                                    <i class="el-icon-s-comment">全部评论</i>
                                </div>
                            </el-col>
                            <el-divider></el-divider>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <div class="grid-content bg-purple">
                                    <el-row class="demo-avatar demo-basic">
                                        <el-col :span="12">
                                            <div class="sub-title">circle</div>
                                            <div class="demo-basic--circle">
                                                <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple">
                                    123
                                    <ul>
                                        <li>
                                            嗷嗷
                                        </li>
                                        <li>
                                            <span>回复 用户名字 ：</span>
                                            <span></span>
                                        </li>
                                    </ul>
                                </div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "CourseCommentDetails",
        data() {
            return {
                src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                form: {
                    name: '',
                    delivery: false,
                    desc: ''
                }
            }
        }
    }
</script>

<style scoped>
    .el-image{
        height: 80px;
        width: 80px;
    }
    .el-row-wen{
        padding-bottom: 30px;
    }
    .bb{
        width:400px;
    }
    li{
        list-style: none;
        text-align:left;
        text-align:center
    }
</style>